<template>
  <div class="cms-views-container search-cms-pages">
    <header class="flex items-center justify-between w-full h-10 px-4">
      <span
        v-if="type === 1"
        class="w-[299px] h-8 search-input flex items-center justify-between pl-4 pr-3 rounded-2xl"
      >
        <span>
          <i class="not-italic bg-[#ff512c] inline-block w-[2px] h-4 relative top-[2px]"></i>
          <label class="text-[#b4b8bf] text-sm">特战荣耀</label>
        </span>
        <SearchOutlined class="text-base" />
      </span>
      <span v-else class="w-[299px] h-8 search-input flex items-center justify-between pl-4 pr-3 rounded-2xl">
        <span>
          <label class="text-[#48494d] text-sm">我们</label>
          <i v-if="type === 2" class="not-italic bg-[#2167ff] inline-block w-[2px] h-4 relative top-[3px]"></i>
        </span>
        <CloseOutlined class="text-base" />
      </span>
      <span class="text-[#48494d] text-sm">取消</span>
    </header>
    <div v-if="type === 1" class="pt-[10px] px-4">
      <p class="flex justify-between mb-4">
        <span class="text-base font-medium text-black">搜索历史</span>
        <img :src="homeIcons.delete" alt="" class="w-6 h-6" />
      </p>
      <div class="w-full text-sm text-[#48494d]">
        <span v-for="item in searchHistory" :key="item" class="inline-block w-1/2 mb-3">{{ item }}</span>
      </div>
    </div>
    <div v-if="type === 2" class="pt-6 px-5 text-sm text-[#48494d]">
      <div v-for="item in searchResult" :key="item" class="h-12 search-result-card">
        <span>图标</span>
        <span class="pl-[10px]"><label class="text-[#ff613f]">我们</label>{{ item }}</span>
      </div>
    </div>
    <div v-if="type === 3" class="pt-2">
      <SearchResult type="video" :resultData="videoResult" />
    </div>
    <div v-if="type === 4" class="pt-2">
      <SearchResult type="novel" :resultData="novelResult" />
    </div>
    <div v-if="type === 5" class="pt-2">
      <SearchResult type="atlas" :resultData="atlasResult" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, ref, reactive } from 'vue'
import SearchResult from '../components/search-result'
import homeIcons from '../assets/home'

withDefaults(defineProps<{ type: number }>(), { type: 1 })

interface ResultList {
  url: string
  name: string
  videoType?: number
  language?: string
  actor?: string
  free: boolean
  author?: string
  content?: string
}

const searchHistory = ref<string[]>([
  '鸡毛飞上天',
  '十月围城',
  '你的名字',
  '粤剧白蛇传',
  '白娘子白蛇传说',
  '一人之下 第四季',
  '狙击手'
])

const searchResult = ref<string[]>(['', '的歌', '的蓝调', '的婚姻', '一起回家', '，破晓之前'])

const videoResult = reactive<ResultList[]>([
  {
    url: 'assets/img/tomorrow.webp',
    name: '我们',
    videoType: 1,
    language: '电影 / 美剧 / 英语',
    actor: '乔丹.皮尔',
    free: true
  },
  {
    url: 'assets/img/ourtone.webp',
    name: '我们的蓝调',
    videoType: 2,
    language: '电视剧 / 美剧 / 英语',
    actor: '李秉宪  申敏儿  金宇彬  车胜元  韩志校  韩志校',
    free: false
  },
  {
    url: 'assets/img/yidaihongshang.webp',
    name: '我们这一天 第一季',
    videoType: 2,
    language: '电视剧 / 美剧 / 英语',
    actor: '约翰.里夸  格伦.费卡拉  肯.奥林',
    free: true
  },
  {
    url: 'assets/img/renshijian.webp',
    name: '我们俩',
    videoType: 1,
    language: '电影 / 内地 / 普通话',
    actor: '马俪文  宫哲  金雅琴  张淑芳  孙捷',
    free: false
  },
  {
    url: 'assets/img/battle-honour.webp',
    name: '我们的世界',
    videoType: 1,
    language: '电影 / 韩剧 / 韩语',
    actor: '尹家恩 崔秀英 薛惠茵 李修仁',
    free: true
  }
])

const novelResult = reactive<ResultList[]>([
  {
    url: 'assets/img/bltd.jpeg',
    name: '我的大侠养成系统',
    free: true,
    author: '洛丹伦的春天',
    content: '借三尺明月，衔两袖青龙，轻剑快马恣意，携侣江湖同游！'
  }
])
const atlasResult = reactive<ResultList[]>([
  {
    url: 'assets/img/bltd.jpeg',
    name: '我们的世界',
    free: true,
    language: '现代 / 奇幻 '
  },
  {
    url: 'assets/img/gtzs.jpeg',
    name: '我们这一天',
    free: false,
    language: '现代 / 言情 '
  }
])
</script>

<style scoped lang="less">
.search-cms-pages {
  .search-input {
    background: rgba(255, 239, 235, 0.4);
  }
  .search-result-card {
    line-height: 48px;
    border-bottom: 1px solid #f1f3f7;
  }
}
</style>
